<template>
    <div class="express-assignment"
         v-loading="loading"
         element-loading-text="运单加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(255, 255, 255, 0.6)">
        <!--{{dataObj}}-->
        <el-row>
            <el-col style="margin-top: 10px;margin-left: 20px; " :span="3" v-for="(item,index) in expressDetailData"
                    :key="index">
                <span class="ddid-box">{{item.full_dingdong}}</span>
            </el-col>
        </el-row>
        <div style="text-align: right;padding:0px 66px 10px 0">
            <span class="show-map" v-if="isShowMap"><span @click="isShowMap = false">关闭地图</span><i
                    class="el-icon-arrow-up"></i></span>
            <span class="show-map open-map" v-if="!isShowMap"><span @click="isShowMap = true">展开地图</span><i
                    class="el-icon-arrow-down"></i></span>
        </div>
        <div class="map-box" v-show="isShowMap">
            <assign-map
                    :map-data="expressDetailData"
                    :site-option="siteOption"
                    :driver-option="driverData"
                    :height="'400px'"
                    v-model="dataObj">
            </assign-map>
        </div >
        <div class="map-box">
            <express-assign
                    v-model="dataObj"
                    :datalist="datalist"
                    :datalistNext="datalistNext"
                    :option="siteOption"
                    :cascaderOption="cascaderOption">
            </express-assign>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitOrder" :loading="addLoading" :disabled="addLoading">提交</el-button>
        </div>
    </div>

</template>

<script>
    import Vue from 'vue';
    import ExpressAssign from '../expressAssign/assign/ExpressAssign.vue'
    import AssignMap from '../../components/map/map-assign.vue';

    export default {
        name: 'express-assignment',
        components: {
            ExpressAssign,
            AssignMap
        },
        props: {
            paramsId: {
                type: String,
                default: null
            },
            driverId: {
                type: String,
                default: null
            }
        },
        data() {
            return {
                loading:false,
                addLoading:false,
                isShowMap: false,
                datalist: [
                    {name: '取件', label: 'pick_up', status: true},
                    {name: '中转取', label: 'go_spot_pick', status: true},
                    {name: '中转送', label: 'go_spot_send', status: true},
                    {name: '派件', label: 'send_to_send', status: true},
                    {name: '调度', label: 'go_point', status: false}
                ],
                datalistNext: [
                    {name: '取件', label: 'pick_up', status: false},
                    {name: '中转送', label: 'go_spot_send', status: true},
                    {name: '派件', label: 'send_to_send', status: true},
                    {name: '调度', label: 'go_point', status: false},
                    {name: '无', label: 'go_null', status: true}
                ],
                expressDetailData: [],
                driverData: [],
                cascaderOption: [{value:'kong',label:'空'}],
                siteOption: [],
                siteApi: 'express/spot?pageSize=200', // 站点api
                driverApi: 'common/user/driver', // 站点api
                dataObj: {
                    driver_id: null,
                    order_ids: [],
                    mission: {
                        target: {   // 主任务
                            type: "pick_up", // 取件
                            spot_id: null,  //站点
                            driver_id: null,  //不传就是站长
                            address: null,
                            lat: null,
                            lon: null,
                        },
                        limit_time: "",
                        comment: "",
                        priority: 300,
                    },
                    next: {
                        target: {
                            type: "go_spot_send", // 中转
                            spot_id: null,  //站点
                            driver_id: null,  //不传就是站长
                            address: null,
                            lat: null,
                            lon: null
                        },
                        limit_time: "",
                        comment: "",
                        priority: 300
                    },

                },
                statusList: [
                    {
                        orderStatus: 1,
                        type: ['pick_up']
                    },
                    {
                        orderStatus: 5,
                        type: ['go_spot_send', 'send_to_send']
                    },
                    {
                        orderStatus: 7,
                        type: ['go_spot_pick']
                    },
                    {
                        orderStatus: 10,
                        type: ['go_spot_send', 'send_to_send']
                    },
                    {
                        orderStatus: 15,
                        type: ['go_spot_pick']
                    },
                    {
                        orderStatus: 20,
                        type: ['go_spot_send', 'send_to_send']
                    }
                ],
                driverTreeApi: 'user/driver/tree', // 司机api

            }
        },
        mounted() {

            if (this.paramsId) {
                this.getExpressDetail();
                this.getPoint();
                this.getDriverTreeData();
                this.getDriverData();
                this.getNowDate();

            }

        },
        methods: {
            getDriverTreeData() {
                this.$http.get(this.driverTreeApi)
                    .then((response) => {
                        response.data.data.forEach((item) => {
                            this.cascaderOption.push(item)
                        });

                        this.dataObj.driver_id = Number(this.driverId);
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            },
            getPoint() {
                let self = this;
                this.$http.get(this.siteApi)
                    .then((response) => {
                        self.siteOption = response.data.data;
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            self.$message.error(error.response.data.msg);
                        } else {
                            self.$message.error('请求错误：' + error.response.status);
                        }
                    });
            },
            getDriverData() {
                let self = this;
                this.$http.get(this.driverApi)
                    .then((response) => {
                        self.driverData = response.data.data;
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            self.$message.error(error.response.data.msg);
                        } else {
                            self.$message.error('请求错误：' + error.response.status);
                        }
                    });
            },
            setDataOne() {
                if (!this.dataObj.driver_id) {  // 取件必须指派司机
                    this.$message.error('司机未指派！');
                    return false;
                }
                if (this.dataObj.next.target.type === 'send_to_send') {
                    console.info('打发的发送到发送到');
                    this.dataObj.next.target.spot_id = null; // 后置任务派送 无站点
                    this.dataObj.next.target.driver_id = null; // 后置任务派送 无接驳人
                }
                if (this.dataObj.next.target.type === 'go_spot_send') { //取件时后置任务时中转送 则必填站点
                    if (!this.dataObj.next.target.spot_id) {
                        this.$message.error('后置任务站点未选择！');
                        return false;
                    }
                }
                this.dataObj.mission.target.spot_id = null; // 取件主任务  无站点
                this.dataObj.mission.target.address = null; // 取件主任务 调度地址
                this.dataObj.mission.target.lat = null; // 取件主任务 无经纬度
                this.dataObj.mission.target.lon = null; // 取件主任务 无经纬度
                this.dataObj.mission.target.driver_id = null; // 取件主任务 接驳人
                this.dataObj.next.target.address = null; // 取件后置任务 调度地址
                this.dataObj.next.target.lat = null; // 取件后置任务 无经纬度
                this.dataObj.next.target.lon = null; // 取件后置任务 无经纬度
                return true;
            },
            setDataTwo() {
                if (!this.dataObj.mission.target.spot_id) {
                    this.$message.error('派送站点未指定！');
                    return false;
                }
                this.dataObj.mission.driver_id = null;
                this.dataObj.mission.target.address = null; // 取件主任务 调度地址
                this.dataObj.mission.target.lat = null; // 取件主任务 无经纬度
                this.dataObj.mission.target.lon = null; // 取件主任务 无经纬度
                this.dataObj.next.target.address = null; // 取件后置任务 调度地址
                this.dataObj.next.target.lat = null; // 取件后置任务 无经纬度
                this.dataObj.next.target.lon = null; // 取件后置任务 无经纬度
                this.dataObj.next.target.driver_id = null; // 取件后置任务 无经纬度
                this.dataObj.next.target.spot_id = null; // 取件后置任务 无经纬度
                this.dataObj.next.target.type = null; // 取件后置任务 无经纬度
                return true;
            },
            setDataThree() {
                // if (!this.dataObj.driver_id) {  // 派件必须指派司机
                //     this.$message.error('司机未指派！');
                //     return false;
                // }
                this.dataObj.mission.target.spot_id = null;
                this.dataObj.mission.target.address = null; // 取件主任务 调度地址
                this.dataObj.mission.target.lat = null; // 取件主任务 无经纬度
                this.dataObj.mission.target.lon = null; // 取件主任务 无经纬度
                this.dataObj.next.target.address = null; // 取件后置任务 调度地址
                this.dataObj.next.target.type = null; // 取件后置任务 调度地址
                this.dataObj.next.target.lat = null; // 取件后置任务 无经纬度
                this.dataObj.next.target.lon = null; // 取件后置任务 无经纬度
                this.dataObj.next.target.spot_id = null; // 取件后置任务 无经纬度
                return true;
            },
            postTask() {
                this.addLoading = true;
                if (this.dataObj.mission.target.type === 'go_spot_pick' && this.dataObj.next.target.type === 'send_to_send') {
                    this.dataObj.mission.target.type = 'send_to_pick';
                }
                if (this.dataObj.next.target.type === 'go_null') {
                    this.dataObj.next.target.type = null;
                }
                // console.info('dataObj',this.dataObj);
                let self = this;
                this.$http.post('express/mission', this.dataObj)
                    .then((response) => {
                        self.$message({
                            message: '恭喜你，指派成功！',
                            type: 'success'
                        });
                        self.$emit('closeDialog');
                        self.$store.commit('refreshDialog');
                        this.addLoading = false;
                    })
                    .catch((error) => {
                        if (this.dataObj.mission.target.type === 'send_to_pick' && this.dataObj.next.target.type === 'send_to_send') {
                            this.dataObj.mission.target.type = 'go_spot_pick';
                        } // 如果主任务未中转取后置任务为派送 指派失败时恢复原状态
                        if (this.dataObj.next.target.type === null) {
                            this.dataObj.next.target.type = 'go_null';
                        }
                        this.addLoading = false;
                        if (error.response.data.msg) {
                            self.$message.error(error.response.data.msg);
                        } else {
                            self.$message.error('请求错误：' + error.response.status);
                        }
                    });
            },
            submitOrder() {
                this.dataObj.order_ids = this.paramsId.split(',');
                if (this.dataObj.mission.target.type === 'pick_up' || this.dataObj.mission.target.type === 'go_spot_pick') {
                    if (!this.setDataOne()) {
                        return;
                    }
                } else if (this.dataObj.mission.target.type === 'go_spot_send') {
                    if (!this.setDataTwo()) {
                        return;
                    }
                } else if (this.dataObj.mission.target.type === 'send_to_send') {
                    if (!this.setDataThree()) {
                        return;
                    }
                }
                this.postTask()
            },
            getNowDate() {
                let date = new Date();
                let seperator1 = "-";
                let seperator2 = ":";
                let month = date.getMonth() + 1;
                let strDate = date.getDate();
                let strSeconds = date.getSeconds();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                if (strSeconds >= 0 && strSeconds <= 9) {
                    strSeconds = "0" + strSeconds;
                }
                date.setMinutes(date.getMinutes() + 30);
                let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    + " " + date.getHours() + seperator2 + date.getMinutes()
                    + seperator2 + strSeconds;
                this.dataObj.mission.limit_time = currentdate;
                date.setMinutes(date.getMinutes() + 30);
                let currentdate1 = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    + " " + date.getHours() + seperator2 + date.getMinutes()
                    + seperator2 + strSeconds;
                this.dataObj.next.limit_time = currentdate1;
            },
            getExpressDetail() {
                this.loading = true;
                let self = this;
                let api = 'express/order?size=1&pageSize=' + this.paramsId.length + '&id$=[' + this.paramsId + ']';
                this.$http.get(api)
                    .then((response) => {
                        self.expressDetailData = response.data.data;
                        self.judgeState(self.expressDetailData[0].order_status);
                        this.loading = false;
                    })
                    .catch((error) => {
                        this.loading = false;
                        if (error.response.data.msg) {
                            self.$message.error(error.response.data.msg);
                        } else {
                            self.$message.error('请求错误：' + error.response.status);
                        }
                    });

            },
            judgeState(status) {
                let self = this;
                for (let index in self.statusList) {
                    if (status === self.statusList[index].orderStatus) {
                        self.datalist.forEach(tab => {
                            if (self.statusList[index].type.join(',').indexOf(tab.label) !== -1) {

                                tab.status = true;
                                // self.dataObj.mission.target.type = self.statusList[index].type[0];
                            } else {
                                tab.status = false;
                            }
                        })
                        let target = self.dataObj.mission.target;
                        target.type = self.statusList[index].type[0];
                        Vue.set(self.dataObj.mission, 'target', target);
                    }
                }
                // console.info('状态', self.dataObj);
            } // 判断快件状态 限时快件按钮
        }
    }
</script>

<style lang="less">
    .express-assignment {
        .ddid-box {
            display: block;
            padding: 10px 10px;
            text-align: center;
            color: #e6a23c;
            background-color: #e2e2e2;
            font-size: 13px;
            border-radius: 6px;

        }
        .open-map {
            margin-bottom: 20px;
        }
        .show-map span {
            cursor: pointer;
        }
        .show-map span:hover {
            color: #11998C;
        }
        .show-map:hover i {
            color: #11998C;
        }
        .dialog-footer {
            text-align: center;
        }
        .map-box {
            padding:0 20px 20px;
            /*height: 400px;*/
        }
    }

    .weight {
        font-weight: 600;
    }

    .amap-info-content {
        font-size: 13px;
        p {
            margin: 2px 0;
        }
    }
</style>

